<template>
  <li>
       <div class="select" >
         <input data-id="item.id" type="checkbox"  
         :checked ="checked()" @click="sel"
          />
       </div>
       <div class="pic">
         <img :src="item.pic" alt="" />
       </div>
       <div class="name">{{item.name}}</div> 
       <div class="price">￥ <span>{{(item.price - 0).toFixed(2)}}</span></div>
       <div class="number">
         <button data-id="item.id" class="sub" @click="increment">-</button>
         <input type="text" :value="item.buy_num" />
         <button data-id="item.id" class="add" @click="decrement">+</button>
       </div>
       <div class="subtotal">￥ <span>{{(item.price * item.buy_num).toFixed(
         2
       )}}</span></div>
       <div class="del">
         <button data-id="item.id" class="del_btn" @click="dell">删除</button>
       </div>
   </li>
</template>

<script>

export default{
    name:"Shop",
    props:["item","index","list"],
    data(){
     return {
      selectNum:0,
      selceted:"",
     }
    },
    computed:{

    },
    mounted(){
       // console.log(this.item.pic);
      // console.log(this.list);
       
    },
    methods:{

      selected(){
        console.log(this.item.select);
             if(this.item.select===true){
           this.selectNum+=1;
            console.log(this.selectNum);
      //    console.log("我需要加一个");
         };
        this.selectNum=0;
      
      },
      checked(){

        return this.item.select? "checked":"";

      },
      //触发事件点击选中该项 当选项都选中时,全选按钮必须选中
      sel(){
      //  console.log(this.item.id);   
     //2.取反
    this.item.select = !this.item.select;
  
      },

      //点击减数量,但不能低于0
        increment(){
            if(this.item.buy_num>0){
                this.item.buy_num--;
            }
          
        },
        //点击增数量
        decrement(){
            //console.log( this.item.buy_num);
            this.item.buy_num++;
        },
        //删除点击就删除该项商品
        dell(index){
            console.log(this.index);
           this.list.splice(index,1)
        },
    }

}

</script>

<style>

</style>
